{% extends 'base/base.html' %}

{% load static %}


{% block title %}
<title>登录</title>
{% endblock %}

{% block css %}
<style>
.state, .password_state{
float:right;
margin-top: -30px;
margin-right: 10px;
display:inline-block;
width:20px;
height:20px;
line-height:20px;
text-align:center;

background-position: center;
}
.unpass{
  background-image: url(/static/img/unpass.png);
}
.pass{
  background-image: url(/static/img/pass.png);
}

.close{
  background-image: url(/static/img/close.png);
}
.open{
  background-image: url(/static/img/open.png);
}
</style>
{% endblock %}


{% block body %}

<form method="post" >
  {% csrf_token %}
  <div class="form-group">
     {{ lgf.username.label_tag }}
    <div>
      {{ lgf.username }}
    </div>
    <span class="state" ></span>
  </div>

    <div class="form-group">
      {{ lgf.password.label_tag }}
  {{ lgf.password }}
  <span class="password_state close" ></span>

  </div>



  <button type="submit" class="btn btn-default">登录</button>
</form>


<a href="https://api.weibo.com/oauth2/authorize?client_id=3223537156&redirect_uri=http://127.0.0.1:8000/user/auth/
"><img style="width: 100px;" src="/static/img/sinaweibo.png"></a>
{% endblock %}


{% block js %}
<script>
$(function(){
  $("#id_username").keyup(function(){
    $.ajax({
      url: "/user/check_username/",
      method:"get",
      data:{
        username: $(this).val()
      },
      success:function(res){
          if(res.code==0){
            $(".state").removeClass("unpass");
            $(".state").addClass("pass");
          }
          else{
            $(".state").removeClass("pass");
            $(".state").addClass("unpass");
          }
      }})
  })

  $(".password_state").mousedown(function(){
    console.log("---");
          $(".password_state").removeClass("close");
            $(".password_state").addClass("open");
            $(".password_state").prev().attr("type", "text")
  })
  $(".password_state").mouseup(function(){
    console.log("--1111-");

          $(".password_state").removeClass("open");
            $(".password_state").addClass("close");
            $(".password_state").prev().attr("type", "password")

  })
})

</script>
{% endblock %}